<template>
	<!-- 整体后台布局 -->
	<el-container>
		<el-header>
			<!-- 后台管理系统左侧显示 -->
			<div class="left">
				<h1>后台管理系统</h1>
			</div>
			<!-- 右侧的退出登录 -->
			<div class="right">
				<el-button type="warning" icon="el-icon-user"  @click="logout" circle></el-button>
			</div>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<!-- 菜单 -->
				<el-menu class="el-menu-vertical-demo" background-color="#333744" style="border-right: none;"
					unique-opened text-color="#fff" active-text-color="#ffd04b" router>
					<!-- 首页 -->
					<el-menu-item index="welcome">
						<i class="el-icon-s-home"></i>
						<span slot="title">网站首页</span>
					</el-menu-item>
					<el-submenu v-for="(one,index) in menums" :index="one.id+''">
						<template slot="title">
							<i :class="one.icon"></i>
							<span>{{one.menusname}}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="(two,ind) in one.children" :index="two.path">
								<template>
									<i class="el-icon-caret-right"></i>
									<span>{{two.menusname}}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu> 					
				</el-menu>
			</el-aside>
			<el-main>
				<!-- 侧边菜单点击所显示的内容的占位符 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				menums: []
			}
		},
		// 当页面加载后，立马执行的代码
		async mounted() {
			// 获取当前登录的用户的编号
			let rid = window.sessionStorage.getItem('rid')
			// 根据编号来查询其下的所有的权限菜单
			let res = await this.$http.get('selectSystemPowersByRid?rid=' + rid)
			
			// 把菜单信息赋值给menums中，在页面中动态加载即可
			this.menums = res.data.data;
			console.log(res.data.data)

		},
		methods: {
			// 退出登录
			logout() {
				window.sessionStorage.clear();
				this.$message.info("退出成功！");
				this.$router.push('/login');
			}
		}
	}
</script>

<style scoped>
	.left {
		display: inline-block;
	}

	.right {
		display: inline-block;
		float: right;
		height: 100%;
	}

	h1 {
		color: white;
		height: 100%;
		margin: 0;
	}

	.el-header {
		background-color: cornflowerblue;
		line-height: 60px;
	}

	.el-aside {
		background-color: #333744;
		color: white;
		height: 780px;
	}

	.el-main {
		background-color: #eaedf1;
		text-align: center;
	}
</style>